<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/cart.css">
    <link rel="stylesheet" href="../css/reset.css">
</head>

<body>
    <div id="head">
        <div id="header">
            <div id="header-icon">
                <img src="../img/cartimg/icon-home-white.svg" alt=""> &nbsp; / &nbsp; 我的购物车</div>
            <div id="header-word">
                <p class="header-wordP">返回网上商店 </p>
                  
            </div>
        </div>
        <div id="rect">
            <div id="rect-con">&nbsp;</div>
            <div id="logo">
                <img src="../img/cartimg/jl-anchor.svg.resource.1461595313723.svg" alt="">
            </div>
            <h1>购物袋</h1>
            <ul id="steps">
                <li id="active">1
                    <span>. 
                购物袋</span>
                </li>
                <li>
                    <img id="arrow-icon" src="../img/cartimg/icon-arrow-right-grey.svg">2
                    <span>. 
        地址和配送</span>
                </li>
                <li>
                    <img id="arrow-icon" src="../img/cartimg/icon-arrow-right-grey.svg"> 3
                    <span>. 
        付款</span>
                </li>
                <li>
                    <img id="arrow-icon" src="../img/cartimg/icon-arrow-right-grey.svg"> 4
                    <span>. 
        查阅订单</span>
                </li>
            </ul>
            <div id="divider">
                <div id="rect1">
                </div>
			

				<div class="cart">
					<table class="content" style="width: 100%;">
						
						<tr class="top">
							<td></td>
							<td>商品</td>
							<td>单价</td>
							<td>数量</td>
							<td>总价</td>
						</tr>
						
						<tr style="height: 100px;">
							<td class="img"><img src="../img/2032370.png.crop.1000.high.white.webp"></td>
							<td class="goods-name" style="width: 191px;"><span class="name">REVERSO TRIBUTE CALENDAR 翻转系列日历腕表</span></td>
							<td><span class="goods-price">2760</span></td>
							<td>
								<button type="button">-</button>
								<span class="goods-num">0</span>
								<button type="button">+</button>
							</td>
							<td>
							    ￥<span class="goods-single-price">0</span>
							</td>
							<td>
							    <input type="button" name="delete" id="" value="x" />
							</td>
						</tr>
					<!-- 	<tr>
							<td colspan="5" style="padding-left: 1003px;">
								一共<span id="goods-total-num">0</span>件商品,共计花费<span id="goods-total-price">0</span>元。
							</td>
						</tr> -->
					</table>
					<div id="jiesuan">
						<p>结算</p>
					</div>
				</div>
				
				
				
                <a href="shop.html" id="goback">返回网上商店</a>
                <hr>
                <div id="shopbag">
                    <div id="shopbag-list">
                        <img src="../img/cartimg/2032370.png.crop.145.265.webp" alt="">
                        <p class="shopbag-word">REVERSO ONE 翻转系列腕表</p>
                        <p class="shopbag-href"><a href="">探索</a></p>
                    </div>
                    <div id="shopbag-list">
                        <img src="../img/cartimg/2027652.png.crop.145.265.webp" alt="">
                        <p class="shopbag-word">Master Control Date大师系列日历腕表</p>
                        <p class="shopbag-href"><a href="">探索</a></p>
                    </div>
                    <div id="shopbag-list">
                        <img src="../img/cartimg/2028981.png.crop.145.265.webp" alt="">
                        <p class="shopbag-word">积家北宸系列响闹潜水腕表</p>
                        <p class="shopbag-href"><a href="">探索</a></p>
                    </div>
                </div>
                <hr>
                <div id="policy">
                    <div class="po-list">
                        <div class="po-1">
                            <h2>退货与配送</h2>
                            <p class="po-txt">免费联邦快递配送。您有权在完成签收之日起七（7）天内申请退货，您购买的积家时计享有两（2）年保修期。<a href="">政策链接</a></p>
                        </div>
                    </div>

                    <div class="po-list">
                        <div class="po-1">
                            <h2>生产商保证</h2>
                            <p class="po-txt">您可以放心购买积家作品。所有手表作品都来自瑞士原厂。<a href="">政策链接</a></p>
                        </div>
                    </div>

                    <div class="po-list">
                        <div class="po-1">
                            <h2>所有交易过程都将保密</h2>
                            <p class="po-txt">我们接受以下汇款方式</p>
                        </div>
                        <ul class="payment-cards">
                            <li><img src="../img/cartimg/ALIX.png.resource.1481113661232.webp"></li>
                            <li><img src="../img/cartimg/ABOC.png.resource.1481113661231.webp"></li>
                            <li><img src="../img/cartimg/BOC.png.resource.1481113661232.webp"></li>
                            <li><img src="../img/cartimg/CCB.png.resource.1481113661251.webp"></li>
                            <li><img src="../img/cartimg/CEBBANK.png.resource.1481113661252.webp"></li>
                            <li><img src="../img/cartimg/CIB.png.resource.1481113661252.webp"></li>
                            <li><img src="../img/cartimg/CITIC.png.resource.1481113661254.webp"></li>
                            <li><img src="../img/cartimg/CMB.png.resource.1481113661254.webp"></li>
                            <li><img src="../img/cartimg/CMBC.png.resource.1481113661267.webp"></li>
                            <li><img src="../img/cartimg/GDB.png.resource.1481113661268.webp"></li>
                            <li><img src="../img/cartimg/HXB.png.resource.1481113661269.webp"></li>
                            <li><img src="../img/cartimg/ICBC.png.resource.1481113661271.webp"></li>
                            <li><img src="../img/cartimg/NBBANK.png.resource.1481113661272.webp"></li>
                            <li><img src="../img/cartimg/POSTGC.png.resource.1481113661272.webp"></li>
                            <li><img src="../img/cartimg/SPABANK.png.resource.1481113661312.webp"></li>
                            <li><img src="../img/cartimg/SPDB.png.resource.1481113661312.webp"></li>
                            <li><img src="../img/cartimg/SRCB.png.resource.1481113661312.webp"></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="footer">
        <div id="footer-needhelp">
            <span class="footer-ndhelp">需要帮助?</span>
            <a href="" class="footer-ndhelp-phonenumber">+86 400 697 7500</a>
            <span class="footer-ndhelp-headline">从星期日到星期六  上午9时至下午6时 (AWST)  </span>
        </div>
    
            <div id="footer-bottom-copyright">
                <a href="" class="footer-bottom-copyright-logo">
            <img src="../img/cartimg/legal_logo.png.resource.1484130884259.webp ">
				</a>
        <a class="footer-bottom-copyright-icp " href=" " >沪ICP备14014303号-13 </a>
      
    </div>
</body>

</html>
<script src="../js/jQuery.js"></script>
<script>
	$(".header-wordP").click(function(){
		window.open("shop.html");
	})
	
	
	
</script>
<script>
	//购物车实现
	class Cart{
		constructor() {
		    
		}
		
		
		//计算每个单独商品的总价
		getGoodsSinglePrice(num,price){
			return num*price;
		}
		
		//增加货物
		addGoods(btn){
			//获取数量
			let oGoodsNum = btn.previousElementSibling;//获取Num元素 获取指定的NUM
			//1.数量更新
			oGoodsNum.innerHTML = Number(oGoodsNum.innerHTML) + 1;//点击一次btn就加1
			//获取单价
			let oGoodsPrice=btn.parentNode.previousElementSibling.firstElementChild;
			//获取每个产品的总价
			let oGoodSinglePrice=btn.parentNode.nextElementSibling.firstElementChild;
			//更新每一个的总价
			oGoodSinglePrice.innerHTML =Number(this.getGoodsSinglePrice(oGoodsNum.innerHTML,oGoodsPrice.innerHTML)); 
		
		}
		//减少货物
		minGoods(btn){
			let oGoodsNum = btn.nextElementSibling;
			if(oGoodsNum.innerHTML > 0){
				oGoodsNum.innerHTML = Number(oGoodsNum.innerHTML) - 1;
				//获取单价
				let oGoodsPrice=btn.parentNode.previousElementSibling.firstElementChild;
				//获取每个产品的总价
				let oGoodSinglePrice=btn.parentNode.nextElementSibling.firstElementChild;
				//更新每一个的总价
				oGoodSinglePrice.innerHTML = Number(this.getGoodsSinglePrice(oGoodsNum.innerHTML,oGoodsPrice.innerHTML));
				}
		}
		delGoods(btn){
			let oTr = btn.parentNode.parentNode.parentNode;
			oTr.remove();
		}
	bindEvent(){
			let oBtns = document.getElementsByTagName("button");
			let that = this;
			for(let i=0; i<oBtns.length; i++){
				if(i%2==0){
					oBtns[i].onclick = function(){
						that.minGoods(this);
					}
				}else{
					oBtns[i].onclick = function(){
						that.addGoods(this);
					}
				}
			}
			
			let oDelBtns = document.querySelectorAll("input");
			
			for(let i=0; i<oDelBtns.length; i++){
				oDelBtns[i].onclick = function(){
					that.delGoods(this);
				}
			}
		}
	}
	
	let c = new Cart();
	
	c.bindEvent();
	
	
	
	
	let url=window.location.href;
	function parseQueryString(url) {
		let str = url.split("?")[1], items = str.split("&");	
		let result = {};
		let arr;
		for (let i = 0; i < items.length; i++) {
			arr = items[i].split("=");		
			result[arr[0]] = arr[1];
		}
		return result;
	}
	let obj = parseQueryString(url);
	$.getJSON("../json/shop.json", function(json){
	    let flag; //用来寻找上一个页面携带id是哪一条json语句
	    for(let index1 in json){
	        for(let index2 in json[index1]){
	            if(json[index1][index2]==obj.id){
	                flag=index1;
	            }
	        }
	    }
	    for(let index1 in json){
	        for(let index2 in json[index1]){
	            if(index1==flag){
	                console.log(index2);
	                if(index2=="img"){
	                    $(".cart td img").attr("src",json[index1][index2])   
	                }
	                if(index2=="price"){
	                    console.log(json[index1][index2]);
	                    $("table tr .goods-price").html(json[index1][index2]);
	                }
					if(index2=="info"){
						$("table td .name").html(json[index1][index2]);
					}
	            }
	        }
	    }
	});
	
	
	
	
</script>
<script>
	// 是否登录
	var login1 = JSON.parse(localStorage.getItem("login1"));
	$("#jiesuan").click(function () {
	    if (login1 == 1) {
	      alert("付钱吧！！")  
	
	    }else{
	        if(confirm("还没登陆，请先登录!")){
	            window.open("login.html");
	        }
	    }
	})
</script>
	
	

